<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>task2</title>
    <link href="task2.css" rel="stylesheet"/>
</head>
<body>
<div class="nav">
    <div class="logo"></div>
    <ul>
        <li><a href="#1">导航链接一</a></li>
        <li><a href="#2">导航链接二</a></li>
        <li><a href="#3">导航链接三</a></li>
        <li><a href="#4">导航链接四</a></li>
    </ul>
</div>
<div class="artical">
    <h1>文章一级标题</h1>
    <h2>文章二级标题</h2>
    <label>文章作者&nbsp;文章发表时间</label>
    <p>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，<br/>
        换行了<br/>
        这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，换行了<br/>
        这是一个很长很长的段落，这是一个很长很长的段落，<a
                href="http://ife.baidu.com">这里有一个链接链接到http://ife.baidu.com</a>这是一个很长很长的段落，这是一个很长很长的段落，<strong>这里有个粗体字</strong>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落。
    </p>
    <img src="task1-1.jpg">
    <p>
        这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，<br/>
        这是一个很长很长的段落，换行了<br/>
        这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，<strong>这里有个粗体字</strong>这是一个很长很长的段落，这是一个很长很长的段落，<a
            href="http://ife.baidu.com" target="_blank">这里有一个链接点击后打开新窗口链接到http://ife.baidu.com</a>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落。
    </p>
</div>
<div class="artical">
    <h1>另一篇文章一级标题</h1>
    <h2>文章二级标题</h2>
    <label>文章作者&nbsp;文章发表时间</label>
    <p>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，<br/>
        换行了<br/>
        这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，换行了<br/>
        这是一个很长很长的段落，这是一个很长很长的段落，<a
                href="http://ife.baidu.com">这里有一个链接链接到http://ife.baidu.com</a>这是一个很长很长的段落，这是一个很长很长的段落，<strong>这里有个粗体字</strong>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落。
    </p>
    <img src="task1-1.jpg">
    <ul class="list-programe">
        <li>列表项目一</li>
        <li>列表项目二</li>
        <li>列表项目三</li>
    </ul>
    <h2>图片</h2>
    <p class="img-box">
        好看的图片<br/>
        <img src="task1-1.jpg">
    </p>
    <p class="img-box">
        好看的图片<br/>
        <img src="task1-1.jpg">
    </p>
    <p class="img-box">
        好看的图片<br/>
        <img src="task1-1.jpg">
    </p>
    <p class="img-box">
        好看的图片<br/>
        <img src="task1-1.jpg">
    </p>
    <p class="img-box">
        好看的图片<br/>
        <img src="task1-1.jpg">
    </p>
    <p class="img-box">
        好看的图片<br/>
        <img src="task1-1.jpg">
    </p>
    <p class="img-box">
        好看的图片<br/>
        <img src="task1-1.jpg">
    </p>
    <p class="img-box">
        好看的图片<br/>
        <img src="task1-1.jpg">
    </p>
    <p class="img-box">
        好看的图片<br/>
        <img src="task1-1.jpg">
    </p>
    <p class="img-box">
        好看的图片<br/>
        <img src="task1-1.jpg">
    </p>
</div>
<div class="artical">
    <h1>最后一篇文章一级标题</h1>
    <h2>文章二级标题</h2>
    <label>文章作者&nbsp;文章发表时间</label>
    <ol>
        <li>排名1</li>
        <li>排名2</li>
        <li>排名3</li>
    </ol>
    下面是一个表格，给表格加了一个border="1"好让你看出是一个表格
    <table cellspacing="0" cellpadding="0">
        <thead>
        <tr>
            <td>表头</td>
            <td>表头</td>
            <td>表头</td>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>表内容单元格</td>
            <td>表内容单元格</td>
            <td><a href="#">操作</a></td>
        </tr>
        <tr>
            <td>表内容单元格</td>
            <td>表内容单元格</td>
            <td><a href="#">操作</a></td>
        </tr>
        <tr>
            <td>表内容单元格</td>
            <td>表内容单元格</td>
            <td><a href="#">操作</a></td>
        </tr>
        <tr>
            <td>表内容单元格</td>
            <td>表内容单元格</td>
            <td><a href="#">操作</a></td>
        </tr>
        <tr>
            <td>总计</td>
            <td colspan='2'>1000</td>
        </tr>
        </tbody>
    </table>
</div>
<div class="artical">
    <h1 class="side-bar-title">这里以后是一个侧栏，这是侧栏的标题</h1>
    <div class="personal-desc">
        <label class="input-label">请输入邮箱地址</label><input type="email" placeholder="如 yzz@163.com"><br/>
        <label class="tip-info">邮箱地址请按要求格式输入</label>
        <label class="input-label">请输入密码</label><input type="password" placeholder="密码为6~16位英文数字"><br/>
        <label class="input-label">请重复输入密码</label><input type="password" placeholder="请再次输入密码"><br/>
        <label class="tip-info">密码为6-16位英文数字</label>
        <label class="input-label">性别</label>
        <input type="radio" checked="checked" name="sex">男
        <input type="radio" name="sex">女<br />
        <label class="input-label">城市</label>
        <select>
            <option>北京</option>
            <option>北京</option>
            <option>北京</option>
        </select><br />
        <label class="input-label">爱好</label>
        <input type="checkbox">运动
        <input type="checkbox">艺术
        <input type="checkbox">科学<br />
        <label class="input-label">个人描述</label><br />
        <textarea>这是一个多行输入框，输入您的个人描述</textarea>
        </div>
        <input type="submit" value="确认提交">
    </div>
</div>
<footer>
    <label class="footer-text">版权所有&copy;</label>
</footer>
</body>
</html>